<template>
  <div class="px-7 py-4.5 bg-white rounded-px-1">
    <div
      v-if="title"
      class="flex flex-row border-0 border-b border-color-split border-solid pb-4.5"
      :class="titleClass"
    >
      <div class="flex-1 font-semibold text-xl text-color-header">
        {{ title }}
        <span v-if="subTitle" class="text-base text-color-secondary font-normal">{{ subTitle }}</span>
      </div>
      <slot name="titleExtra" />
    </div>
    <slot />
  </div>
</template>
<script setup lang="ts">
defineProps<{
  title?: string;
  titleClass?: string;
  subTitle?: string;
}>();
</script>
